import 'package:sanzijing/http/api.dart';
import 'package:sanzijing/global.dart';
import 'package:flutter/material.dart';
import 'package:sanzijing/page/detail.dart';

class DirectoryPage extends StatefulWidget {
  DirectoryPage({Key key}) : super(key: key);
  @override
  _DirectoryPageState createState() => _DirectoryPageState();
}

class _DirectoryPageState extends State<DirectoryPage> {
  var _directory = [];
  @override
  void initState() {
    getDirectoryList().then((res) {
      setState(() {
        _directory = res['directory'];
      });
    });
    super.initState();
  }

  List<Widget> renderDirectoryList(directory) {
    List<Widget> list = [];
    for (var i = 0; i < directory.length; i++) {
      var item = directory[i];
      list.add(
        InkWell(
          onTap: () {
            Navigator.push(
              context,
              MaterialPageRoute(
                builder: (context) => DetailPage(id: item['id'].toString()),
              ),
            );
          },
          child: Container(
            padding: EdgeInsets.all(10),
            decoration: BoxDecoration(
              border: Border(
                bottom: BorderSide(
                  color: Global.fontSecondColor.withOpacity(0.2),
                  width: 0.5,
                ),
              ),
            ),
            child: Column(
              mainAxisAlignment: MainAxisAlignment.start,
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Row(
                  mainAxisAlignment: MainAxisAlignment.start,
                  crossAxisAlignment: CrossAxisAlignment.end,
                  children: [
                    Text(
                      (i + 1).toString(),
                      style: TextStyle(
                        color: Global.primaryColor,
                        fontSize: 13,
                        fontWeight: FontWeight.w600,
                      ),
                    ),
                    SizedBox(width: 10),
                    Text(
                      '《三字经》 第${item['id']}段',
                      maxLines: 4,
                      overflow: TextOverflow.ellipsis,
                      style: TextStyle(
                        color: Global.fontSecondColor,
                        fontFamily: 'fangzhengkai',
                        fontSize: 15,
                        fontWeight: FontWeight.w600,
                      ),
                    ),
                  ],
                ),
                SizedBox(height: 4),
                Text(
                  item['title'],
                  maxLines: 4,
                  overflow: TextOverflow.ellipsis,
                  style: TextStyle(
                    color: Global.fontColor,
                    fontFamily: 'fangzhengkai',
                    fontSize: 19,
                    fontWeight: FontWeight.w600,
                  ),
                ),
              ],
            ),
          ),
        ),
      );
    }
    return list;
  }

  @override
  Widget build(BuildContext context) {
    return _directory.length == 0
        ? Scaffold(
            body: Container(
              width: MediaQuery.of(context).size.width,
              height: MediaQuery.of(context).size.height,
              color: Global.backgroundColor,
              child: Center(child: CircularProgressIndicator()),
            ),
          )
        : Scaffold(
            appBar: AppBar(
              title: Text(
                "《三字经》 - 目录",
                style: TextStyle(
                  color: Global.fontColor,
                  fontFamily: 'fangzhengkai',
                  fontSize: 20,
                  fontWeight: FontWeight.w600,
                ),
              ),
              iconTheme: IconThemeData(color: Global.fontSecondColor),
              elevation: 3,
              backgroundColor: Global.backgroundColor,
            ),
            body: Container(
              width: MediaQuery.of(context).size.width,
              height: MediaQuery.of(context).size.height,
              decoration: BoxDecoration(
                color: Global.backgroundColor.withOpacity(0.85),
              ),
              child: SingleChildScrollView(
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.start,
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: renderDirectoryList(_directory),
                ),
              ),
            ),
          );
  }
}
